<html>
<head>
    <link href="${ctx}/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="${ctx}/font-awesome/3.0.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="${ctx}/css/index.css" rel="stylesheet">
    <link href="${ctx}/font-awesome/3.0.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="${ctx}/bootstrap-table/1.12.0/bootstrap-table.min.css" rel="stylesheet">
    <script src="${ctx}/jquery/2.1.4/jquery.min.js"></script>
    <script src="${ctx}/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="${ctx}/bootstrap-table/1.12.0/bootstrap-table.min.js"></script>
    <link href="${ctx}/select2/4.0.6-rc.1/css/select2.min.css" rel="stylesheet">
    <style>
        .btn {
            font-size: 12px;
        }

        .table th, .table td {
            text-align: center;
            vertical-align: middle !important;
        }

        .select-editable {
            position: relative;
            background-color: white;
            border: solid grey 1px;
            width: 120px;
            height: 18px;
        }

        .select-editable select {
            position: absolute;
            top: 0px;
            left: 0px;
            font-size: 14px;
            border: none;
            width: 120px;
            margin: 0;
        }

        .select-editable input {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100px;
            padding: 1px;
            font-size: 12px;
            border: none;
        }

        .select-editable select:focus, .select-editable input:focus {
            outline: none;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div id="toolbar">
        <div class="input-group" style="float: left; width: 200px; margin:0 15px 10px 0;">
            <span class="input-group-addon">手机号码</span>
            <input type="text" class="form-control" id="phone">
        </div>
        <div class="input-group" style="float: left; width: 200px; margin:0 15px 10px 0;">
            <span class="input-group-addon">任务名称</span>
            <input type="text" class="form-control" id="title" value="<#if _title??>${_title}</#if>">
        </div>
        <div class="input-group" style="float: left; width: 200px; margin:0 15px 10px 0;">
            <span class="input-group-addon">客户姓名</span>
            <input type="text" class="form-control" id="customer">
        </div>
        <div class="input-group" style="float: left; max-width: 380px; margin:0 15px 10px 0;">
            <span class="input-group-addon">创建时间</span>
            <input type="date" class="form-control" style="position:relative; float:left; width:140px" id="startTime">
            <input type="date" class="form-control" style="position:relative; float:left; width:140px" id="endTime">
        </div>
        <div class="input-group" style="float: left; max-width: 200px; margin:0 15px 10px 0;">
            <span class="input-group-addon">任务状态</span>
            <select id="status" class="form-control" style="">
                <option value="">全部</option>
            </select>
        </div>
        <div class="btn-group">
            <button id="search_btn" class="btn btn-info">立即查询</button>
        </div>

    </div>
    <table id="table"></table>
</div>

<div id="myModal" class="modal fade bs-example-modal-lg" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="gridSystemModalLabel">搜搜任务审核</h4>
            </div>
            <div class="modal-body">
                <div style="text-align:center;">
                    用户: <span id="username"></span> &nbsp;&nbsp;&nbsp;&nbsp; 任务：<span id="taskTitle"></span>
                    <br/>
                </div>
                <div style="text-align:center; padding-top: 10px;">
                    <div class="col-md-12" id="imagesContainer">

                    </div>
                    <div style="clear:both;">
                        <br/>
                    </div>
                    <div style="padding: 15px; text-align:left;">
                        <select id="select2" style="width:300px; ">
                            <option value="截图不合规定">截图不合规定</option>
                            <option value="未按要求完成任务">未按要求完成任务</option>
                            <option value="未按要求的关键字进行搜索">未按要求的关键字进行搜索</option>
                            <option value="未按关键字搜索!">未按指定应用市场搜索!</option>
                        </select>
                    </div>
                    <div style="clear:both;">
                    </div>
                    <div class="modal-footer">
                        <button id="success_btn" type="button" class="btn btn-success">成功（A）</button>
                        <button id="fail_btn" type="button" class="btn btn-warning">失败（D）</button>
                    </div>
                </div>
            </div>
        </div>


        <script src="${ctx}/bootstrap-table/1.12.0/locale/bootstrap-table-zh-CN.min.js"></script>
        <script src="${ctx}/bootstrap-table/1.12.0/extensions/export/bootstrap-table-export.min.js"></script>
        <script src="${ctx}/select2/4.0.6-rc.1/js/select2.min.js"></script>
        <script src="${ctx}/js/extends.js"></script>
        <script>

            var hasOpend = false;
            var v_index = -1;

            function openModal(index, memberId, taskid, phone, title) {
                v_index = index;
                $.ajax({
                    url: '/soso/detail',
                    data: {
                        memberid: memberId,
                        taskid: taskid
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function (res) {
                        //$("#remark").text("截图不合规定");
                        $("#imagesContainer").html("");
                        var array = JSON.parse(res.result);
                        for (var i = 0; i < array.length; i++) {
                            var div = $("<div>").addClass("col-md-4");
                            var img = $("<img>").attr("src", array[i].image).css({
                                'width': '100%',
                                'height': 'auto'
                            });
                            div.append(img);
                            $("#imagesContainer").append(div);
                        }
                        $("#username").text(phone);
                        $("#taskTitle").text(title);
                        $("#success_btn").attr("data-id", memberId);
                        $("#success_btn").attr("data-task", taskid);
                        $("#fail_btn").attr("data-id", memberId);
                        $("#fail_btn").attr("data-task", taskid);
                        $('#myModal').modal('show');

                        $.fn.modal.Constructor.prototype.enforceFocus = function () {
                        };

                        $('#select2').select2({
                            tags: true
                        });

                        hasOpend = true;
                    },
                    error: function () {
                        alert('网络异常！');
                    }
                });
            }

            function openModal2(index, memberId, taskid, phone, title) {
                $("#success_btn").show();
                $("#fail_btn").show();
                v_index = index;
                $.ajax({
                    url: '/soso/detail',
                    data: {
                        memberid: memberId,
                        taskid: taskid
                    },
                    type: 'post',
                    dataType: 'json',
                    success: function (res) {
                        //$("#remark").text("截图不合规定");
                        $("#imagesContainer").html("");
                        var array = JSON.parse(res.result);
                        for (var i = 0; i < array.length; i++) {
                            var div = $("<div>").addClass("col-md-4");
                            var img = $("<img>").attr("src", array[i].image).css({
                                'width': '100%',
                                'height': 'auto'
                            });
                            div.append(img);
                            $("#imagesContainer").append(div);
                        }
                        $("#username").text(phone);
                        $("#taskTitle").text(title);
                        $("#success_btn").attr("data-id", memberId);
                        $("#success_btn").attr("data-task", taskid);
                        $("#fail_btn").attr("data-id", memberId);
                        $("#fail_btn").attr("data-task", taskid);
                        if (res.status != 'WaitCheckout') {
                            $("#success_btn").hide();
                            $("#fail_btn").hide();
                        }
                    },
                    error: function () {
                        alert('网络异常！');
                    }
                });
            }

            function queryParams(opt) {
                opt.phone = $("#phone").val();
                opt.title = $("#title").val();
                opt.stime = $("#startTime").val();
                opt.etime = $("#endTime").val();
                opt.status = $("#status").val();
                opt.customer = $("#customer").val();
                return opt;
            };

            var table = null;

            $(function () {
                table = $('#table');
                //加载表格
                table.bootstrapTable({
                    url: '/member/getShowList', //请求后台的URL（*）
                    method: 'post', //请求方式（*）
                    toolbar: '#toolbar', //工具按钮用哪个容器
                    striped: true,
                    dataType: "json",
                    pagination: true,
                    // "queryParamsType": "limit",
                    singleSelect: false,
                    contentType: "application/x-www-form-urlencoded",
                    pageSize: 50,
                    pageNumber: 1,
                    search: false, //不显示 搜索框
                    showColumns: false, //不显示下拉框（选择显示的列）
                    sidePagination: "server", //服务端请求
                    queryParams: queryParams,
                    //minimunCountColumns: 2,
                    pageList: [50, 100, 200, 500], //可供选择的每页的行数（*）
                    //queryParams : oTableInit.queryParams,//传递参数（*）
                    searchOnEnterKey: true,
                    // search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                    strictSearch: true,
                    //showColumns: true, //是否显示所有的列
                    showRefresh: false, //是否显示刷新按钮
                    minimumCountColumns: 2, //最少允许的列数
                    clickToSelect: false, //是否启用点击选中行
                    height: (document.body.clientHeight), //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                    uniqueId: "userId", //每一行的唯一标识，一般为主键列
                    // showToggle: true, //是否显示详细视图和列表视图的切换按钮
                    // cardView: false, //是否显示详细视图
                    // detailView: false, //是否显示父子表
                    // showExport: true, //是否显示导出
                    exportDataType: "selected", //basic', 'all', 'selected'
                    columns: [{
                        checkbox: true
                    }, {
                        title: 'ID',
                        width: '50px',
                        formatter: function (value, row, index) {
                            return index + 1;
                        }
                    }, {
                        field: 'phone',
                        title: '手机号',
                        width: '85px'
                    }, {
                        field: 'appStore',
                        title: '渠道',
                        width: '85px'
                    }, {
                        field: 'createTime',
                        title: '创建时间',
                        width: '125px',
                        formatter: function (value, row, index) {
                            return new Date(value).format("yyyy-MM-dd HH:mm:ss");
                        }
                    }, {
                        field: 'exhibition',
                        title: '是否展示',
                        width: '125px'
                    }, {
                        field: 'dierection',
                        title: '跳转方向',
                        width: '125px'
                    }, {
                        field: 'url',
                        title: '跳转地址',
                    }, {
                        field: 'personalWebsite',
                        title: '微视个人主页',
                    }, {
                        field: 'picture',
                        title: '图片地址',
                        width: '100px'
                    }, {
                        field: 'uuid',
                        title: '操作',
                        width: '80px',
                        formatter: function (value, row, index) {
                            // var btns = '<a class="check_btn" href="javascript:void(0);" onClick="openModal('+ row.memberId + ',' + row.taskId +')">审核</a>';
                            var btns = '<a class="check_btn" href="javascript:void(0);" onClick="openModal(' + index + ',\'' + row.memberId + '\',\'' + row.taskId + '\',\'' + row.phone + '\',\'' + row.title + '\')">审核</a>';
                            return btns;
                        }
                    }],
                    responseHandler: function (res) {
                        return {
                            "total": res.total, //总页数
                            "rows": res.rows //数据
                        };
                    }
                });

                // 查询
                $("#search_btn").click(function () {
                    table.bootstrapTable('refreshOptions', {pageNumber: 1});
                });

                $("#success_btn").click(function () {
                    var memberid = $(this).attr("data-id");
                    var taskid = $(this).attr("data-task");
                    if (confirm("审核通过？")) {
                        $.post("/soso/check", {
                            status: '任务成功',
                            memberid: memberid,
                            taskid: taskid
                        }, function (res) {
                            $("#fail_btn").hide();
                            $("#success_btn").hide();
                            // table.bootstrapTable('refresh');
                            alert(res);
                        });
                    }

                });

                $("#fail_btn").click(function () {
                    var memberid = $(this).attr("data-id");
                    var taskid = $(this).attr("data-task");
                    if (confirm("审核失败？")) {
                        $.post("/soso/check", {
                            status: '任务失败',
                            memberid: memberid,
                            taskid: taskid
                        }, function (res) {
                            $("#fail_btn").hide();
                            // table.bootstrapTable('refresh');
                            alert(res);
                        });
                    }
                });

                $('#myModal').on('hidden.bs.modal', function (e) {
                    hasOpend = false;
                    _index = -1;
                });

                $("body").on("keyup", function (e) {
                    if (!hasOpend) {
                        return;
                    }
                    if (e.keyCode == 65) {
                        $("#success_btn").click();
                    } else if (e.keyCode == 68) {
                        $("#fail_btn").click();
                    } else if (e.keyCode == 37) {
                        v_index--;
                        if (v_index <= -1) {
                            return;
                        }
                        table.bootstrapTable('uncheckAll');
                        try {
                            table.bootstrapTable('check', v_index);
                            var row = table.bootstrapTable('getSelections')[0];
                            console.log(row);
                            openModal2(v_index, row.memberId, row.taskId, row.phone, row.title);
                        } catch (exception) {
                            v_index++;
                        }
                    } else if (e.keyCode == 39) {
                        v_index++;
                        table.bootstrapTable('uncheckAll');
                        try {
                            table.bootstrapTable('check', v_index);
                            var row = table.bootstrapTable('getSelections')[0];
                            console.log(row);
                            openModal2(v_index, row.memberId, row.taskId, row.phone, row.title);
                        } catch (exception) {
                            v_index--;
                        }
                    }
                });

            });

            // 编辑
            /*var edit = function(memberid, taskid) {
                window.parent.iw.dialog({
                    size: 'lg',
                    title: '审核任务',
                    href: '/soso/check/' + memberid + '/' + taskid,
                    closing: function() {
                        table.bootstrapTable('refresh');
                    }
                });
            };*/

        </script>

</body>

</html>
